import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import path from 'node:path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),//页面上的瞄准镜
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  //允许局域网访问我的前端，启动ip，则会出现ip
  server: {
    host: '0.0.0.0',
    //配置代理: 为什么可以解决跨域问题？浏览器的保护策略。而项目打包部署后，是不会走这里的，这里仅仅开发的时候有用。
    /*
      哪些情况会出现跨域问题？前后端分离项目，必然会出现这个问题。前端ip端口，后端也有一个ip端口，端口不同，就会出现跨域问题。
      1. 协议不同：http，https
      2. ip域名不同
      3. 端口不同
      保护浏览器的请求，百度的前端，访问google的服务器后台接口。
    */
    //原理：相当于在浏览器启动一个代理服务，然后欺骗浏览器，相当于重定向（在浏览器访问的是非跨域资源，但是会通过这个代理，去重定向到后端的服务器，绕过了浏览器跨域保护。）
    proxy: {
      //代理入口
      "/api": {
        //目标地址
        target: "http://127.0.0.1:8080",//Tomcat服务器地址
        //开启跨域
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
        //保持连接活跃以支持SSE
        ws: true,
        configure: (proxy, _options) => {
          proxy.on("proxyRes", (proxyRes, req, res) => {
            //设置SSE需要的响应头
            res.setHeader("Content-Type", "text/event-stream");
            res.setHeader("Cache-Control", "no-cache");
            res.setHeader("Connection", "keep-alive");
          });
        },
      },
    },
  }
})
